<template>
<div>
    <nav-bar></nav-bar>
    <div class="banner-box">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="jumpTo">
         <img :src="item" />
      </van-swipe-item>
    </van-swipe>
  </div>
</div>
  
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem ,Lazyload} from "vant";
import { getList } from "../../apis/detail";
import NavBar from './NavBra.vue';

Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: { NavBar },
  name: "BannerList",

  data() {
    return {
           bannerList: [],
    };
  },

  mounted() {},

  methods: {
    jumpTo(){
        this.$router.go(-1)
    }
  },
  created () {
     getList(this.$route.params.proid).then((data) => {
      // console.log(this.$route.params.proid)
      // console.log(data.data.data.banners[0].split(","));
      this.bannerList = data.data.data.banners[0].split(",");
    });
  }
};
</script>

<style  scoped>
.banner-box{
    height:100%;
    width: 100%;
    display: flex;
    align-items: center;
}
.van-swipe{
    height:3.5rem;
    width: 100%;
}
img{
    width: 100%;
    height: 100%;
}
</style>